// 关闭弹出框(通用)
function closeTrafficProp() {
  map.removeInteraction(draw)
  draw = null
  $('.traffic-prop').hide()
  hideMask()
}

// 包含报告路况和路况信息查询
// 打开报告路况
function openReportTraffic() {
  // 解绑zj的点击事件
  map.un('click', addPopup)

  // 打开遮罩层
  showMask()
  $('.traffic-report').show()
  // 获取当前时间
  let reportDate = new Date()
  let Y = reportDate.getFullYear(),
    M = reportDate.getMonth() + 1,
    D = reportDate.getDate(),
    H = reportDate.getHours(),
    Min = reportDate.getMinutes()
  if ((M + '').length == 1) {
    M = '0' + M
  }
  if ((D + '').length == 1) {
    D = '0' + D
  }
  if ((H + '').length == 1) {
    H = '0' + H
  }
  if ((Min + '').length == 1) {
    Min = '0' + Min
  }
  $('#event-time').val(`${Y}-${M}-${D}T${H}:${Min}`)
}

// 提交路况信息
function reportTraffic() {
  const data = {
    report_user: report_user,
    event_type: $('#event-type').val(),
    event_addr: $('#event-attr').val(),
    event_mark: $('#event-mark').val(),
    event_time: document.querySelector('#event-time').value,
    event_describe: $('#event-describe').val(),
    event_status: '0',
  }
  if (data.event_addr == '') {
    return
  }
  $.post(
    'http://localhost:3000/gg_event',
    data,
    function (data) {
      alert('报告路况成功')
    },
    'json'
  )
  $('.traffic-report').hide()
  hideMask()
}

// 路况信息查询
// 打开路况信息
function openTrafficInfo() {
  // 解绑zj的点击事件
  map.un('click', addPopup)

  // 打开遮罩层
  showMask()
  $('.traffic-info').show()
  oTableInit.Init()
}
// 获取路况信息
const oTableInit = new Object()
//初始化Table
oTableInit.Init = function () {
  $('#tb_roadinfo').bootstrapTable({
    url: 'http://localhost:3000/gg_event', //请求后台的URL（*）
    method: 'get', //请求方式（*）
    toolbar: 'getRoadInfo', //工具按钮用哪个容器
    striped: true, //是否显示行间隔色
    cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    pagination: true, //是否显示分页（*）
    sortable: false, //是否启用排序
    sortOrder: 'asc', //排序方式
    sidePagination: 'server', //分页方式：client客户端分页，server服务端分页（*）
    pageNumber: 1, //初始化加载第一页，默认第一页
    pageSize: 5, //每页的记录行数（*）
    pageList: [5, 10, 25], //可供选择的每页的行数（*）
    search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
    strictSearch: false, //设置为 true启用 全匹配搜索，否则为模糊搜索
    searchOnEnterKey: false, //设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
    trimOnSearch: true, //设置为 true 将允许空字符搜索
    showColumns: true, //是否显示所有的列
    showRefresh: true, //是否显示刷新按钮
    minimumCountColumns: 3, //最少允许的列数
    clickToSelect: true, //是否启用点击选中行
    // height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
    uniqueId: 'ID', //每一行的唯一标识，一般为主键列
    showToggle: false, //是否显示详细视图和列表视图的切换按钮
    cardView: false, //是否显示详细视图
    detailView: false, //是否显示父子表
    queryParams: function (params) {
      var temp = {
        //这里键的名字和控制器的变量名必须一致
        type: 'getRoadInfo',
        keyword: $('.fixed-table-toolbar .search input').val().trim(),
        size: params.pageSize || 5, //每页多少条数据
        page: params.pageNumber || 1, //请求第几页
      }
      return temp
    }, //传递参数（*）
    queryParamsType: '',
    responseHandler: function (res) {
      var temp = {
        rows: [],
        total: 0,
      }
      if (res) {
        if (res.code === 0) {
          temp.rows = res.result.resData
          temp.total = res.result.total
        }
      }

      return temp
    }, //ajax已请求到数据，表格加载数据之前调用函数
    columns: [
      {
        field: 'report_user',
        title: '用户名',
        align: 'center',
        rowspan: 1,
        width: 100,
      },
      {
        field: 'event_type',
        title: '事件类型',
        align: 'center',
        rowspan: 1,
        width: 100,
      },
      {
        field: 'event_addr',
        title: '事件地址',
        align: 'center',
        rowspan: 1,
      },
      {
        field: 'event_mark',
        title: '附近建筑',
        align: 'center',
        rowspan: 1,
      },
      {
        field: 'event_time',
        title: '发生时间',
        align: 'center',
        rowspan: 1,
        width: 180,
      },
      {
        field: 'event_describe',
        title: '事件描述',
        align: 'center',
        rowspan: 1,
        width: 200,
        formatter: function (value, row, index) {
          const describe = `<div>${value}</div>
          <div class="btn-group describe-detail-btn">
           <button class="btn btn-default btn-xs dropdown-toggle " type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          <span class="caret">
          </button>
           <ul class="dropdown-menu">
            <div class="describe-detail"><div class="well well-lg describe-detail-title">事件详情</div><div class="well well-lg"> ${value}</div></div>
           </ul>
            </div>`
          return describe
        },
      },
      {
        field: 'event_status',
        title: '操作',
        align: 'center',
        rowspan: 1,
        formatter: function (value, row, index) {
          var a = `<button type='button' eventId='${row.event_id}' onclick="oTableInit.confirmTraffic(${row.event_id})" class='btn btn-success btn-xs mr5'>通过</button>`
          var b = `<button type='button' eventId='${row.event_id}' onclick="oTableInit.ignoreTraffic(${row.event_id})" class='btn btn-warning btn-xs mr5'>忽略</button>`
          if (value === '0') {
            return a + b
          } else {
            return '已审核'
          }
        },
      },
    ],
  })
  // 更改路况状态
  oTableInit.confirmTraffic = function (event_id) {
    $.ajax({
      url: 'http://localhost:3000/gg_event/' + event_id,
      type: 'put',
      data: { event_id, event_status: '2' },
      success: function (data) {
        // 把路况操作变成已审核
        $(`[eventId=${event_id}]`).parent().empty().append('已审核')
      },
    })
  }
  oTableInit.ignoreTraffic = function (event_id) {
    $.ajax({
      url: 'http://localhost:3000/gg_event/' + event_id,
      type: 'put',
      data: { event_id, event_status: '1' },
      success: function (data) {
        // 把路况操作变成已审核
        $(`[eventId=${event_id}]`).parent().empty().append('已审核')
      },
    })
  }

  // $('#tb_roadinfo tbody tr td:nth-child(6)').css({ color: 'red' })
  return oTableInit
}

// 点击文字才会出现显示详情按钮
//<div onclick="describeDetail('${value}',${index})"></div>
// function describeDetail(value, index) {
// 	const describe = `<div class="btn-group describe-detail-btn">
//   <button class="btn btn-default btn-xs dropdown-toggle " type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
//  <span class="caret">
// </button>
//   <ul class="dropdown-menu">
//     <div class="describe-detail">${value}</div>
//   </ul>
// </div>`
// 	if (
// 		$(
// 			`#tb_roadinfo tbody [data-index="${index}"] td:nth-child(6) .btn-group`
// 		).length != 0
// 	)
// 		return
// 	$(`#tb_roadinfo tbody [data-index="${index}"] td:nth-child(6)`).append(
// 		describe
// 	)
// }
